<template>
  <div>
  	<router-link to="/" tag="div" class="header-back" v-show="showHeader">
  			<span class="iconfont icon-fanhui"></span>
  	</router-link>
  	<div class="header-fixed" v-show="!showHeader" :style="opacityStyle">
	    <router-link to="/">
	      <span class="iconfont icon-fanhui"></span>
	   </router-link>
			景区详情
	  </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader',
  data () {
  	return {
  		showHeader: true,
  		opacityStyle: {
  			opacity: 0
  		}
  	}
  },
  methods: {
  	handleScroll () {
  		//console.log('scroll')
  		const top = document.documentElement.scrollTop
  		if(top > 60) {
  			let opacity = top / 140
        this.opacityStyle = { opacity }
  			this.showHeader = false
  		} else {
  			this.showHeader = true
  		}
  	}
  },
  mounted () { //mounted当页面加载的时候
  	window.addEventListener('scroll',this.handleScroll) //addEventListener给页面添加监听事件
  },
  unmounted () {//unmounted当页面离开的时候
    window.removeEventListener('scroll', this.handleScroll)//removeEventListener移除监听事件
  }
}
</script>

<style lang="stylus" scoped="">
@import '~styles/varibles.styl'
.header-back
	width:.7rem
	height: .7rem
	line-height: .7rem
	background: rgba(0,0,0,0.8)
	border-radius: 100%
	text-align:center
	position: absolute
	top:.2rem
	left:.2rem
	.icon-fanhui
		color: #fff
.header-fixed
	background:$bgColor 
	height:$headerHeight
	line-height:$headerHeight
	color: #fff
	text-align: center
	font-size: .32rem
	position: fixed
	top: 0
	left: 0
	right: 0
	z-index: 9
	.icon-fanhui
		float:left
		margin-left:.15rem
		color:#fff
</style>